<template>
	<view class="talk">
		<!-- S 顶部导航 -->
		<sol-navbar title="聊天讨论">
			<template v-slot:right>
				<image class="talk-naver_icon" src="/static/icon-default/icon_more_spot.png" mode="scaleToFill">
				</image>
			</template>
		</sol-navbar>
		<!-- E 顶部导航 -->

		<!-- S 聊天室头像组 -->
		<view class="talk-group" v-if="showGroup" @click="fnVipServeEvent('open')">
			<template v-for="i in 7">
				<sol-avatar class="talk-group_item" src="https://dummyimage.com/200x200" :size="50" :key="i">
				</sol-avatar>
			</template>
			<sol-image class="talk-group_more" src="/static/icon-default/icon_more.png" width="64rpx" height="64rpx">
			</sol-image>
		</view>
		<!-- E 聊天室头像组 -->

		<!-- S 消息滚动区 -->
		<scroll-view class="talk-scroll"
			:class="{'talk-scroll_more': showBoxMore, 'talk-scroll_group': showGroup, 'talk-scroll_group-more': showGroup && showBoxMore}"
			:scroll-into-view="intoItem" :enable-flex="true" :scroll-with-animation='true' :scroll-y="true"
			:scroll-x="false" :enable-back-to-top="false" :show-scrollbar="false" :refresher-enabled="true"
			refresher-default-style="none" refresher-background="#576069">

			<view class="talk-item">
				<sol-image class="talk-item_avatar" src="https://dummyimage.com/200x200" width="90rpx"
					height="90rpx"></sol-image>
				<view class="talk-item_box">
					<view class="talk-item_box-name" v-if="showGroup">小木木</view>
					<view class="talk-item_box-content">
						我们已经成为好友啦，现在我们可以开始聊天了。
					</view>
				</view>
			</view>

			<view class="talk-item" :class="{'talk-item_self': true}">
				<sol-image class="talk-item_avatar" src="https://dummyimage.com/200x200" width="90rpx"
					height="90rpx"></sol-image>
				<view class="talk-item_box">
					<view class="talk-item_box-name" v-if="showGroup">小木木</view>
					<view class="talk-item_box-content">
						我们已经成为好友啦，现在我们可以开始聊天了。
					</view>
				</view>
			</view>

			<view class="talk-item-time">上午 9:12</view>

			<view class="talk-item" :class="{'talk-item_self': item.sender == 'me'}" v-for="(item, index) in tempList"
				:key="index" :id="'msg_' + item.id">
				<sol-image class="talk-item_avatar" src="https://dummyimage.com/200x200" width="90rpx"
					height="90rpx" @click="fnSenderAvatarEvent('open', index)"></sol-image>
				<view class="talk-item_box">
					<view class="talk-item_box-name" v-if="showGroup">小木木</view>
					<view class="talk-item_box-content">
						{{item.content}} - {{index}}
					</view>
				</view>
			</view>

			<view id="bottom"></view>
		</scroll-view>
		<!-- E 消息滚动区 -->

		<!-- S 底部导航条 -->
		<view class="talk-tabber safe-area-inset-bottom">
			<!-- S 显示项 -->
			<view class="talk-tabber-item">
				<image class="talk-tabber-item_more" src="/static/icon-message/icon_expression.png" mode="scaleToFill"
					@click="fnTabberEvent('more')">
				</image>
				<textarea class="talk-tabber-item_input" value="" placeholder="参与聊天吧..." :cursor-spacing="32"
					:maxlength="500" :fixed="true" :auto-height="true" :show-confirm-bar="false" v-model="inputText"
					@input="fnInputEvent" @confirm="fnConfirmEvent" />
				<button class="talk-tabber-item_send" :disabled="notSend" @click="fnConfirmEvent">发送</button>
			</view>
			<!-- E 显示项 -->

			<!-- S 更多操作 -->
			<view class="talk-tabber-more" v-if="showBoxMore">
				<view class="talk-tabber-more_expression">
					<image class="talk-tabber-more_expression-icon" src="/static/icon-message/icon_expression.png"
						mode="scaleToFill" v-for="i in 10" :key='i'></image>
				</view>
			</view>
			<!-- E 更多操作 -->
		</view>
		<!-- S 底部导航条 -->

		<!-- S 弹出对方头像 -->
		<sol-drawer v-model="senderAvatarOpen" :error-text="showGroup ? '踢出TA' : ''" primary-text="查看主页"
			confirm-text="屏蔽及举报" cancel-text="取消" @click="fnSenderAvatarEvent">
			<template v-slot:default>
				<view class="avatar-item">
					<sol-avatar src="https://dummyimage.com/200x200" size="lg"></sol-avatar>
					<text class="avatar-item_name">暮年</text>
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出对方头像 -->

		<!-- S 弹出聊天室说明 -->
		<sol-drawer v-model="groupExplainOpen" primary-text="确定" @click="fnGroupExplainEvent">
			<template v-slot:default>
				<view class="group-explain">
					<sol-image class="group-explain_icon" src="https://dummyimage.com/200x200"></sol-image>
					<view class="group-explain_name">失眠治疗室</view>
					<view class="group-explain_text">
						Hi！朋友，欢迎进入这个失眠治疗室，请你在这里敞开心扉的聊天吧！但不准发广告以及其他的违规行为，否则会被永久移除并举报哦！
					</view>
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出聊天室说明 -->

		<!-- S 弹出查看主页及聊天室更多人开通会员弹出层 -->
		<sol-drawer v-model="vipServeOpen" primary-text="前往开通会员" cancel-text="取消" @click="fnVipServeEvent">
			<template v-slot:default>
				<view class="vip-serve">
					<sol-image class="vip-serve_icon" src="https://dummyimage.com/200x200"></sol-image>
					<view class="vip-serve_name">未开通会员服务</view>
					<view class="vip-serve_text">
						仅会员可以对群聊中未发言的用户进行主页查看哦！
					</view>
				</view>
			</template>
		</sol-drawer>
		<!-- E 弹出查看主页及聊天室更多人开通会员弹出层 -->

	</view>
</template>

<script>
	import {
		decodeParam
	} from "@/utils/function/codeParam.js"

	export default {
		name: "Talk",
		data() {
			return {
				// 滚动至
				intoItem: "bottom",
				// 更多点击
				showBoxMore: false,
				// 输入文本
				inputText: "",
				// 禁止发送
				notSend: true,
				// 临时消息
				tempList: [{
					id: 1,
					sender: 'ta',
					content: "内容"
				}],
				// 发送者头像弹出层
				senderAvatarOpen: false,
				// 聊天室
				showGroup: false,
				// 聊天室说明弹出层
				groupExplainOpen: false,
				// 弹出查看主页及聊天室更多人开通会员弹出层
				vipServeOpen: false,

			};
		},
		computed: {},
		onLoad(opt) {
			if (opt && opt.uid) {
				const {
					type
				} = decodeParam(opt);
				console.log(opt)
				// 延迟后再弹出
				setTimeout(() => {
					this.showGroup = type == 'group';
					this.groupExplainOpen = type == 'group';
				}, 600)

			}
		},
		methods: {
			// 聊天室说明弹出层事件
			fnGroupExplainEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						this.groupExplainOpen = true;
						break;
					case 'primary': // 确认
					case 'mask': // 遮罩
					case 'cancel': // 取消
						this.groupExplainOpen = false;
						break;
				}
			},
			// 弹出查看主页及聊天室更多人开通会员弹出层事件
			fnVipServeEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						this.vipServeOpen = true;
						break;
					case 'mask': // 遮罩
					case 'cancel': // 取消
						this.vipServeOpen = false;
						break;
					case 'primary': // 前往开通
						uni.navigateTo({
							url: '/pages/user/open-vip/open-vip'
						})
						break;
				}
			},
			// 发送者头像弹出事件
			fnSenderAvatarEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'open': // 打开
						const sender = this.tempList[value].sender;
						if (sender == 'ta') {
							this.senderAvatarOpen = true;
						}
						break;
					case 'mask': // 遮罩
					case 'cancel': // 取消
						this.senderAvatarOpen = false;
						break;
					case 'primary': // 查看主页
						uni.navigateTo({
							url: '/pages/user/info/info'
						})
						break;
					case 'confirm': // 屏蔽
						uni.navigateTo({
							url: '/pages/other/report/report'
						})
						break;

				}
			},
			// 导航条事件
			fnTabberEvent(type = '', value = 0) {
				this.$log(this.$options.name, type, value);
				switch (type) {
					case 'more': // 点击更多
						this.showBoxMore = !this.showBoxMore;
						break;
				}
			},
			// 输入监听事件
			fnInputEvent(e) {
				const {
					value,
					cursor
				} = e.detail;
				this.$log(this.$options.name, value, cursor);
				// 未输入禁止发送
				this.notSend = cursor <= 0;
			},
			// 输入完成事件
			fnConfirmEvent() {
				// 禁止发送
				if (this.notSend) return;

				this.$log(this.$options.name, this.inputText);

				let s = new Date().getTime();
				this.tempList.push({
					id: s,
					sender: 'me',
					content: this.inputText
				});

				// 滚动至id项和清空输入框
				this.intoItem = 'msg_' + s;
				this.inputText = '';
				this.notSend = true;
			}

		}
	}
</script>

<style lang="scss">
	.talk {
		min-height: 100vh;
		background-color: $--color-background;

		// 顶部栏
		&-naver {
			&_icon {
				width: 56rpx;
				height: 44rpx;
				margin-right: 28rpx;
				padding: 14rpx 0 14rpx 14rpx;
			}
		}

		// 聊天室用户头像
		&-group {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 12rpx 0;
			margin-bottom: 12rpx;
			background-color: #484e53;

			&_item {
				margin-left: 12rpx;
			}

			&_more {
				padding-left: 18rpx;
				width: 64rpx;
				height: 64rpx;
				overflow: hidden;
			}
		}

		&-scroll {
			// position: absolute;
			// top: 152rpx;
			// left: 0;
			// right: 0;
			// bottom: 152rpx;
			width: auto;
			height: 78vh;

			&_more {
				height: 58vh;
			}

			&_group {
				padding-top: 12rpx;
				height: 70vh;
				/* #ifdef H5 */
				height: 74vh;
				/* #endif */

				&-more {
					height: 50vh;
				}
			}
		}

		// 对话项
		&-item {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			padding-bottom: 28rpx;

			// 自己发出
			&_self {
				display: flex;
				flex-direction: row-reverse;

				.talk-item_box {
					align-items: flex-end;
				}

				.talk-item_box-content {
					background: #d1d3d4;
					color: #5D5D5D;
				}
			}

			&_avatar {
				height: 90rpx;
				width: 90rpx;
				overflow: hidden;
				border-radius: 50%;
				margin: 0 28rpx;
			}

			// 消息盒子
			&_box {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				flex-basis: 64%;

				&-name {
					font-size: 28rpx;
					text-align: center;
					font-weight: 400;
					color: #BBBBBB;
					padding: 8rpx 0 14rpx;
				}

				&-content {
					padding: 18rpx 28rpx;
					background: #474e54;
					border-radius: 24rpx;
					flex-basis: 55%;
					font-size: 28rpx;
					letter-spacing: 4rpx;
					font-weight: 400;
					color: #DDDDDD;
					line-height: 42rpx;
					min-height: 55rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					flex-flow: wrap;
					white-space: pre-wrap;
					word-break: break-word;
					word-spacing: normal;
					overflow: hidden;
				}
			}

			// 时间分割
			&-time {
				font-size: 24rpx;
				text-align: center;
				font-weight: bold;
				color: #878787;
				padding-bottom: 28rpx;
			}
		}

		// 下方导航条
		&-tabber {
			display: flex;
			flex-direction: column;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: auto;

			// 显示项
			&-item {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				padding: 18rpx 28rpx;
				background-color: #474e54;
				height: 120rpx;

				&_more {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					overflow: hidden;
					display: block;
				}

				&_input {
					padding: 12rpx 24rpx;
					border-radius: 12rpx;
					color: #DDDDDD;
					font-size: 28rpx;
					font-weight: 400;
					background-color: #576069;
					letter-spacing: 4rpx;
					line-height: 36rpx;
					margin: 0 28rpx;
					flex: 1;
					max-height: 100rpx;
					min-height: 52rpx;
				}

				&_send {
					padding: 0 32rpx;
					font-size: 28rpx;
					font-weight: 400;
					// color: #a7a9ac !important;
					// background-color: #d1d3d4 !important;
					background-color: #607d8b;
					color: #DDDDDD;
					letter-spacing: 4rpx;
					border-radius: 36rpx;
					margin: 0;
					line-height: 64rpx;
					border: none;
					overflow: hidden;
				}
			}

			// 更多展开
			&-more {
				height: 20vh;
				background: #576069;

				// 表情排布
				&_expression {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: flex-start;

					&-icon {
						width: 90rpx;
						height: 90rpx;
						border-radius: 12rpx;
						overflow: hidden;
						margin: 20rpx 18rpx;
					}
				}
			}

		}

		// 弹出聊天室说明
		.group-explain {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&_icon {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			&_name {
				font-size: 32rpx;
				font-weight: bold;
				color: #DDDDDD;
				letter-spacing: 4rpx;
				padding-top: 28rpx;
			}

			&_text {
				font-size: 32rpx;
				font-weight: 400;
				color: #BBBBBB;
				letter-spacing: 4rpx;
				padding: 32rpx 28rpx 42rpx;
			}
		}

		// 弹出查看主页及聊天室更多人开通会员弹出层
		.vip-serve {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&_icon {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			&_name {
				font-size: 32rpx;
				font-weight: bold;
				color: #DDDDDD;
				letter-spacing: 4rpx;
				padding-top: 28rpx;
			}

			&_text {
				font-size: 32rpx;
				font-weight: 400;
				color: #BBBBBB;
				letter-spacing: 4rpx;
				padding: 32rpx 28rpx 42rpx;
				text-align: center;
			}
		}

		// 弹出发送者头像
		.avatar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 42rpx;

			&_name {
				margin-top: 28rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #DDDDDD;
			}
		}
	}
</style>
